<template>
  <div id="app">
    <!-- 遮罩层 -->
    <div class="top-overlay"></div>
    <!-- 标题栏 -->
    <div
      class="title"
      v-if="$route.meta.title"
    >
      <!-- 控制指定页面显示返回按钮 -->
      <div
        class="back-arrow"
        v-if="$route.meta.back === 'on'"
        @click="$router.go(-1)"
      >
        <img src="./assets/images/navbar/back_arrow.png" alt="" width="23"/>
      </div>
      <!-- 标题文字 -->
      <div class="title-text">
        {{ $route.meta.title }}
      </div>
    </div>

    <!-- 控制指定页面显示底部导航条 -->
    <div v-if="$route.meta.keepAlive">
      <router-view></router-view>
      <navbar></navbar>
    </div>
    <!-- 不显示底部导航条的页面 -->
    <transition name="slide-fade">
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>
  </div>
</template>

<script>
// import login from "pages/login"
import navbar from "./components/navbar/index";

export default {
  name: "App",
  components: {
    navbar,
  },
  watch: {
  }
}
</script>

<style lang="scss">
@import "./assets/css/nprogress.css";
@font-face {
  font-family: NotoSansHans-Regular;
  src: url("../static/fonts/NotoSansHans-Regular.otf");
}

.van-overlay {
  background-color: transparent !important;
}

.van-overflow-hidden {
  .top-overlay {
    position: fixed;
    display: block;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    top: 0;
    left: 0;
    z-index: 9;
  }
}

.title {
  width: 100%;
  height: 44px;
  line-height: 44px;
  background: #fff;
  font-weight: bold;
  padding-top: 44px;

  .back-arrow {
    position: absolute;
    height: 44px;
    width: 23px;

    img {
      position: relative;
      left: 10px;
      top: 40%;
      transform: translateY(-50%);
    }
  }

  .title-text {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 18px;
  }
}

#app {
  font-family: NotoSansHans-Regular, Helvetica, "Microsoft YaHei", "微软雅黑",
  Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #333333;
  max-width: 768px;
  margin: 0 auto;
}

.container {
  padding: 15px 15px 65px 15px;
}

.el-notification {
  width: 220px;
}

.el-loading-spinner {
  top: calc(50% - 60px);
  position: fixed;
  left: 50%;
  transform: translateX(-50%);

  .el-loading-text {
    font-size: 16px;
  }
}

.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.8);
}

.slide-fade-enter-active {
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(30px);
  opacity: 0;
}
.page-slide-left {
  animation: page-slide-left 1s both cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes page-slide-left {
  0% {
    opacity: 0;
    margin-top: 30px;
  }

  100% {
    opacity: 1;
    margin-top: 0;
  }
}
</style>
